<template>
  <div class="echartsBar">
    <div class="caouseHead" :class="{ smallCharts: smallCharts }" v-if="!width">
      <div style="padding-left: 133px" v-if="smallCharts"></div>
      <div v-if="exitFullScreen" style="padding-left: 45px" />
      <div>任务学习统计</div>
      <div class="btnBox" @click="handelFullScreen" v-if="!smallCharts">
        <img :src="require('@/assets/images/fullIcon.png')" />
      </div>
      <!-- <div class="legend">
        <div class="lineBox">
          <div class="line green" />
          <div class="title">已学任务</div>
        </div>
        <div class="lineBox">
          <div class="line yellow" />
          <div class="title">在学任务</div>
        </div>
        <div class="lineBox">
          <div class="line red" />
          <div class="title">未学任务</div>
        </div>
      </div> -->
      <div v-if="exitFullScreen">
        <div class="fullScreenAndnarrow">
          <div class="btnBox" @click="handelExitFullScreen">
            <img :src="require('@/assets/images/narrowIcon.png')" />
          </div>
        </div>
      </div>
    </div>
    <div class="statisticsInfoTitle" v-else>
      <span
        >学生总人数：{{ studyCount }}
        <img
          :src="require('@/assets/images/newFull.png')"
          @click="handelFullScreen"
          v-if="!exitFullScreen"
        />
        <img
          :src="require('@/assets/images/newFull.png')"
          @click="handelExitFullScreen"
          v-else
        />
      </span>
    </div>
    <div class="echartsBox">
      <div
        :id="[`${echartsName}`]"
        class="histogram"
        :style="[
          {
            width: exitFullScreen
              ? '95vw'
              : width
              ? width
              : collapse
              ? '548px'
              : '1168px',
          },
          {
            height: exitFullScreen
              ? '490px'
              : height
              ? height
              : collapse
              ? '304px'
              : '350px',
          },
        ]"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultData: [],
      myChart: null,
      // 指定图表的配置项和数据
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["已学任务", "在学任务", "未学任务"],
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: "60px",
          containLabel: true,
        },
        toolbox: {
          right: 10,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        dataZoom: [
          {
            start: this.start,
            end: this.end,
            startValue: "",
            filterMode: "filter",
          },
          {
            type: "inside",
            filterMode: "filter",
          },
        ],
        xAxis: {
          type: "category",
          data: [],
          offset: 12,
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: 35,
            show: true,
            margin: 20,
            textStyle: {
              color: "#000",
              fontSize: 12,
              fontWeight: "bold",
            },
            formatter: function (val) {
              var strs = val.split(""); //字符串数组
              var str = "";
              for (var i = 0, s; (s = strs[i++]); ) {
                //遍历字符串数组
                str += s;
                if (!(i % 5)) str += "\n"; //按需要求余
              }
              return str;
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              width: 9,
              color: "#1296db",
            },
          },
          realtimeSort: true,
        },

        yAxis: [
          {
            type: "value",
            scale: false,
            max: "dataMax",
            splitLine: {
              show: false,
            },
            axisLine: {
              onZero: false,
              show: false,
            },
            axisTick: {
              show: false, //不显示坐标轴刻度线
            },
            axisLabel: {
              show: false, //不显示坐标轴上的文字
            },
          },
        ],

        series: [
          {
            name: "未学任务",
            type: "bar",
            stack: "广告",
            emphasis: {
              focus: "series",
            },
            barWidth: this.width ? "21px" : "40px",

            itemStyle: {
              normal: {
                color: "#ef6765",
                barBorderRadius: this.width ? [0, 0, 5, 5] : [0, 0, 11, 11],
                label: {
                  show: true, //开启显示
                  position: "inside", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 16,
                    fontWeight: "bold",
                  },
                },
              },
            },
            data: [],
          },
          {
            name: "在学任务",
            type: "bar",
            stack: "广告",
            barWidth: this.width ? "21px" : "40px",
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              normal: {
                color: "#f9c957",
                label: {
                  show: true, //开启显示
                  position: "inside", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 16,
                    fontWeight: "bold",
                  },
                },
              },
            },
            data: [],
          },
          {
            name: "已学任务",
            type: "bar",
            stack: "广告",
            barWidth: this.width ? "21px" : "40px",
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              normal: {
                color: "#91cd74",
                barBorderRadius: this.width ? [5, 5, 0, 0] : [11, 11, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "inside", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 16,
                    fontWeight: "bold",
                  },
                },
              },
            },
            data: [],
          },
        ],
      },
    };
  },
  props: {
    item: Number,
    echartsName: String,
    exitFullScreen: Boolean,
    collapse: Boolean,
    // 任务统计
    taskCount: Array,
    // 数据统计
    finshCount: Object,
    // 总人数
    studyCount: Number,
    //滚动条默认开始结束位置
    start: Number,
    end: Number,
    smallCharts: Boolean, // 小图显示标签
    width: String,
    height: String,
  },
  watch: {
    taskCount(n, o) {
      this.option.xAxis.data = n;
      this.option.dataZoom[0].startValue = n[0]?.value;
    },
    finshCount(n, o) {
      this.option.series[0].data = n.notStartStuCount;
      this.option.series[1].data = n.studyingStuCount;
      this.option.series[2].data = n.finishedStuCount;
      this.createChart();
    },
  },
  created() {},
  methods: {
    createChart() {
      // 解决toolbar重置图表功能失效
      document.getElementById(`${this.echartsName}`)?.setAttribute('_echarts_instance_', '')
      // 初始化echarts实例
      if (!document.getElementById(`${this.echartsName}`)) return
      this.myChart = this.$echarts.init(
        document.getElementById(`${this.echartsName}`)
      );

      // 导入配置
      this.myChart.setOption(this.option);
    },
    initData() {
      this.option.xAxis.data = this.taskCount;
      this.option.dataZoom[0].startValue = this.taskCount[0]?.value;
      this.option.series[0].data = this.finshCount.notStartStuCount;
      this.option.series[1].data = this.finshCount.studyingStuCount;
      this.option.series[2].data = this.finshCount.finishedStuCount;
      if (this.width && !this.exitFullScreen) {
        this.option.xAxis.axisLabel.show = false;
      }
    },
    // 进入全屏时渲染图表
    handelCreate() {
      this.$nextTick(() => {
        this.createChart();
      });
    },
    // 退出全屏
    handelExitFullScreen() {
      this.$emit("exitFullScreen");
    },
    // 进入全屏
    handelFullScreen() {
      this.$emit("handelFullScreen");
    },
  },
  mounted() {
    this.initData();
    this.createChart();
  },
};
</script>

<style lang="stylus" scoped>
.echartsBar {
  .caouseHead {
    position: relative;
    padding: 0 7%;
    padding-bottom: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 103px;
    font-family: Microsoft JhengHei UI;
    font-size: 20px;
    font-weight: bold;
    color: #000000;

    .btnBox {
      float: right;
      cursor: pointer;
      position: absolute;
      top: 54px;
      right: 273px;
      display: inline-block;
      width: 45px;
      height: 45px;
      text-align: center;
      line-height: 45px;
      background-color: #003262;
      border-radius: 5px;

      img {
        object-fit: cover;
      }
    }

    .legend {
      position: absolute;
      top: 38px;
      right: 55px;
      width: 133px;
      height: 66px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      .lineBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        line-height: 16px;

        .line {
          width: 60px;
          height: 6px;
          background-color: #ef6765;
          border-radius: 10px;
          border: solid 1px #ef6765;
        }

        .green {
          background-color: #91cd74;
          border: solid 1px #91cd74;
        }

        .yellow {
          background-color: #f9c957;
          border: solid 1px #f9c957;
        }

        .red {
          background-color: #ef6765;
          border: solid 1px #ef6765;
        }

        .title {
          font-family: Yu Gothic UI;
          font-weight: 300;
          font-size: 12px;
          color: #000000;
        }
      }
    }
  }

  .statisticsInfoTitle {
    padding-top: 5px;
    padding-bottom: 7px;
    font-family: Source Han Sans CN;
    font-size: 1rem;
    color: #000000;
    text-align: center;

    span {
      position: relative;
    }

    img {
      cursor: pointer;
      position: absolute;
      right: -32px;
      top: 3px;
    }
  }

  .smallCharts {
    display: block;
    text-align: center;
    line-height: 103px;

    .btnBox {
      display: none;
    }

    .legend {
      position: relative;
      right: unset;
      top: unset;
    }
  }

  .echartsBox {
    display: flex;
    align-items: center;
    // height: 447px;
    // background-color: rgba(101, 99, 99, 0.09);
  }

  .histogram {
    margin: 0 auto;
    height: 288px;
  }
}
</style>